<template>
   <div class="topchart">
  <div class="item1" v-for="(item, index) in cardItems" :key="index">
    <el-card class="chart" shadow="hover">
      <div class="title1">{{ item.title }}</div>
      <component :is="item.component" />
    </el-card>
  </div>
</div>
</template>

<script setup>
import { watch } from 'vue';
import { useDataStore } from '@/stores/dataStore'
import { storeToRefs } from 'pinia'
const store = useDataStore()
const { cardItems,data1 } = storeToRefs(store)

watch(data1, () => {
  store.getTopData();})
</script>

<style scoped>
.topchart {
  display: flex;
  justify-content: space-between;
  margin: 20px;
  gap: 20px;
}
.item1 {
  flex: 1;
}

.title1{
  font-size: 14px;
  color:#777;
}

</style>